<template>
  <div id="IotAtmUserAccount">
    <el-row>
      <el-button type="text" @click="setOpen(true)">新增账户</el-button>
    </el-row>

    <el-table :data="list">
      <el-table-column property="type_name" label="类型"></el-table-column>
      <el-table-column label="账户">
        <template slot-scope="{row}">
          {{row.type == 1 ? $tool.stringReplaceStar(row.bank_card,3,4) : row.wx_nickname}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{row}">
          <el-button plain @click="setOpen(row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="设置账户" :visible.sync="set_box.show" width="450px" append-to-body>
      <el-form :model="set_box.form" label-width="74px">
        <el-form-item label="类型">
          <el-select v-model="set_box.form.type" placeholder="请选择提现账户类型" :clearable="false">
            <el-option v-for="(item, index) in  dics.atm_account_type" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开户行" v-show="set_box.form.type === $api.Enum.AtmAccountTypeBank">
          <el-select v-model="set_box.form.bank_code" placeholder="请选择开户行" :clearable="false">
            <el-option v-for="(item, index) in  dics.atm_bank_code_type" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="银行卡" v-show="set_box.form.type === $api.Enum.AtmAccountTypeBank">
          <el-input v-model="set_box.form.bank_card" placeholder="请输入银行卡号"></el-input>
        </el-form-item>
        <el-form-item label="开户名" v-show="set_box.form.type === $api.Enum.AtmAccountTypeBank">
          <el-input v-model="set_box.form.user_name" placeholder="请输入姓名"></el-input>
        </el-form-item>


        <el-form-item label="微信用户" v-show="set_box.form.type === $api.Enum.AtmAccountTypeWx">
          <el-input v-model="set_box.form.user_name" placeholder="请输入微信名称">
            <el-button slot="append" @click="getWxUser">查询</el-button>
          </el-input>
          <p>
            未找到用户，可扫码
            <el-popover trigger="hover" @show="createQRcode" @hide="deteleQRcode">
              <i slot="reference" class="iconfont icon-erweima"></i>
              <div class="QRcode" ref="QRCode"><!--二维码容器,在这个div里面生成二维码--></div>
            </el-popover>
            确认是否授权
          </p>
        </el-form-item>

        <el-row class="wx_user_warp">
              <el-card v-for="(item, index) in set_box.wx_user_list" @click.native="selectedWxUser(item.id)" :class="item.class" shadow="hover" :body-style="{ padding: '0px' }">
                <img :src="item.headimgurl" class="image">
                <div><span>{{ item.nickname }}</span></div>
              </el-card>
        </el-row>

        <el-form-item label="" label-width="0" style="text-align: center;">
          <el-button type="success" @click="setSubmit">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";

export default {
  name: "IotAtmAccount",
  props:{
    request: {

    },
  },
  data(){
    return{
      user:{},
      dics: {
        atm_account_type:[],
      },
      atm:{},
      app_detail:null,
      list:[],
      set_box:{
        show:false,
        form:{
          type: '',
          wx_user_id: 0,
          wx_openid: '',
          wx_nickname: '',
          bank_code: '',
          bank_card: '',
          user_name: '',
        },
        wx_user_list:[],
      },
      is_change: false,
    }
  },
  mounted() {
    this.user = this.$tool.getUser()
    let types = [this.$api.Enum.TypeAtmAccountType, this.$api.Enum.TypeAtmBankCode]
    this.$api.foundation.dicListExtendCache(types, {}, res =>{
      this.dics.atm_account_type = res[this.$api.Enum.TypeAtmAccountType]
      this.dics.atm_bank_code_type = res[this.$api.Enum.TypeAtmBankCode]
    })
    this.getList()
    this.getAtm()
  },
  // 销毁之前
  beforeDestroy() {
      this.$emit('close', {change: this.is_change})
  },
  methods: {
    getAtm(){
      this.$api.merchant.atmDetail({id: this.user.setting.atm_id}, res=>{
        if (!res.status){
          return this.$message.error(res.message)
        }
        this.atm = res.data
      })
    },
    getList(){
      this.$api.merchant.atmAccountList({page:1, size:99}, res =>{
        if (!res.status){
          return this.$message.error(res.message)
        }
        this.list = res.data.list
      })
    },
    setOpen(show){
      this.set_box.show = true
      if (typeof show === 'object'){
        this.set_box.form = show
        if (this.set_box.form.bank_code === 0){
          this.set_box.form.bank_code = ''
        }
      }else {
        this.set_box.form = {
          type: '',
          account: '',
          user_id: 0
        }
      }
    },
    setSubmit(){
      console.log("提交",this.set_box.form)
      let body = this.$tool.copyJSON(this.set_box.form)
      body.type = Number(body.type)
      if (!body.type){
        return this.$message.warning('请选择账户类型！')
      }
      body.bank_code = Number(body.bank_code)

      this.$api.merchant.atmAccountSet(body, res =>{
        if (!res.status){
          return this.$message.error(res.message)
        }
        this.$message.success('成功.')
        this.set_box.show =false
        this.is_change = true
        this.getList()
      })
    },
    // 微信用户查询
    getWxUser(){
      if (this.set_box.form.user_name === ''){
        return this.message.warning('请输入用户名')
      }
      let id = this.set_box.form.wx_user_id

      this.$api.merchant.wxUserList({nickname: this.set_box.form.user_name, app_id: this.atm.app_id, size:20}, res =>{
        if (!res.status){
          return this.$message.error(res.message)
        }
        if (res.data.list.length === 0){
          this.$message.warning('未找到符合条件用户')
        }
        this.set_box.wx_user_list = res.data.list.map(function (item){
          if (item.id === id){
            item.class = 'wx_user active'
          }else {
            item.class = 'wx_user'
          }
          return item
        })
      })
    },
    selectedWxUser(id){
      console.log("选择用户",id)
      this.set_box.form.wx_user_id = id
      this.set_box.wx_user_list = this.set_box.wx_user_list.map((item)=>{
        if (item.id === id){
          this.set_box.form.wx_openid = item.openid
          this.set_box.form.wx_nickname = item.nickname
          item.class = 'wx_user active'
        }else {
          item.class = 'wx_user'
        }
        return item
      })
    },
    // 展示二维码
    createQRcode() {
      let txt = ''
      if (this.atm.app_id > 0){ // 获取完整访问地址
        if (this.app_detail === null){
          this.$api.merchant.appDetailPublic({id: this.atm.app_id}, res => {
            if (!res.status) {
              return this.$message.error(res.message)
            }
            this.app_detail = res.data??{}
          },{async:false})
        }
        txt = this.app_detail.wx_cli_url[0].url+'?rd=user_info'
      }
      console.log(txt)
      if (txt === ''){
        this.$refs.QRCode.innerHTML = '无法设置微信用户，请联系管理员'
        return
      }

      new QRCode(this.$refs.QRCode, {
        width: 150,
        height: 150
      }).makeCode(`${txt}`);
    },
    // 移除二维码
    deteleQRcode() {
      this.$refs.QRCode.innerHTML = ''
    },

  }
}
</script>

<style lang="less" scoped>

.wx_user_warp{
  min-height: 140px;
  white-space: nowrap;
  overflow-x: auto;
  margin-bottom: 40px;

  .active{
    border-color: #409EFF;
  }
  .wx_user{
    width: 80px;
    height: 100px;
    margin: 0 20px 0 0;
    cursor: pointer;
    display: inline-block;

    img{
      width: 100%;
      max-height: 80px;
    }

    div{
      font-size: 12px;
      line-height: 100%;
      text-align: center;
    }
  }

}
</style>